<template>
  <div class="app-container">
    <!--    <el-button type="primary" @click="handleDown()">批量下载</el-button>-->
    <el-form style="float: right" :inline="true" :model="formSearch" class="demo-form-inline">
      <el-form-item prop="areaSelect1">
        <area-select
          ref="areaselect"
          :area-num="formSearch.provCode"
          :area-name="formSearch.provName"
          :city-num="formSearch.cityCode"
          placeholder="请选择企业注册地"
          @getAreaSelect="getAreaSelect2"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="year"
          type="year"
          format="yyyy"
          value-format="yyyy"
          placeholder="选择年"
          @change="changYear"
        />
      </el-form-item>
      <el-form-item>
        <el-input v-model="formSearch.entName" style="width: 350px" placeholder="输入企业名称" @keyup.enter.native="searchFetchData()" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="formSearch.agentId" filterable placeholder="请选择代理">
          <el-option
            v-for="item in formattedOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchFetchData()">查询</el-button>
        <el-button type="primary" @click="searchReset()">重置</el-button>
        <template v-if="formSearch.areaSelect1 !== '' && excelFlag === true">
          <el-button :loading="loading" type="primary" @click="onExcel()">导出Excel</el-button>
        </template>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="企业名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.entName }}
        </template>
      </el-table-column>

      <el-table-column label="地区" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.provName }}-{{ scope.row.cityName }}-{{ scope.row.distName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话" align="center" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.contactsTel }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.contactsMobile }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="企业类型" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.entTypeName }}</span>
          <!--          <span :type="scope.row.roleCode | statusFilter">{{ scope.row.roleCode | statusFormat1 }}</span>-->
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="企业规模" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.entScaleName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="年度" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.creatorId }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="填报时间" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>
       <el-table-column label="代理名称" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.agentId }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="110">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="primary" size="mini" @click="toDetails(scope.row.userId, scope.row.creatorId, scope.row.creatorId, scope.row.cityCode)">查看详情</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      ref="paging"
      :current-page="currentPage"
      :total="total"
      :limit="limit"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
    />
  </div>
</template>
<script>
import { list, toExcel } from '@/api/submitted'
import { findAgent } from '@/api/enterprise'
import Excel from '@/utils/excel'
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'
import AreaSelect from '@/components/AreaSelect'
import { mapGetters } from 'vuex'
export default {
  name: 'SubmittedList',
  components: {
    Pagination,
    AreaSelect
  },
  data() {
    return {
      formSearch: {
        entName: '',
        areaSelect1: '',
        agentId: ''
      },
      options: [],
      year: '',
      currentPage: 1,
      limit: 10,
      total: 0,
      list: null,
      listLoading: true,
      loading: false,
      excelFlag: false
    }
  },
  computed: {
    formattedOptions() {
      // 转换数据格式，例如从 { id: ..., name: ... } 转换为 { value: ..., label: ... }
      return this.options.map(option => ({
        value: option.id,
        label: option.agentName
      }))
    }
  },
  created() {
    if (this.$route.query.pageN) { this.currentPage = this.$route.query.pageN - 0 }
    this.fetchData()
    this.getfindAgent()
  },
  methods: {
    getfindAgent() {
      findAgent().then(response => {
        if (response.result === 1) {
          this.options = response.data
          this.listLoading = false
        }
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        this.$message({
          message: '加载失败', type: 'warning'
        })
      })
    },
    fetchData() {
      this.listLoading = true
      let cityC = ''
      if (this.formSearch.areaSelect1.cityCode === '0') {
        cityC = ''
      } else {
        cityC = this.formSearch.areaSelect1.cityCode
      }
      list({ provCode: this.formSearch.areaSelect1.areaCode, cityCode: cityC, year: this.year, entName: this.formSearch.entName, currentPage: this.currentPage, agentId: this.formSearch.agentId  }).then(response => {
        if (response.result === 1) {
          this.total = response.data.total
          this.list = response.data.list
          if (this.total > 0) {
            this.excelFlag = true
          } else {
            this.excelFlag = false
          }
          this.listLoading = false
        }
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    searchFetchData() {
      this.fetchData()
    },
    searchReset() {
      this.formSearch.provCode = ''
      this.formSearch.provName = ''
      this.formSearch.cityCode = ''
      this.formSearch.cityName = ''
      this.formSearch.areaSelect1 = []
      this.$set(this.formSearch.areaSelect1, 'areaCode', this.formSearch.provCode)
      this.$set(this.formSearch.areaSelect1, 'areaName', this.formSearch.provName)
      this.$set(this.formSearch.areaSelect1, 'cityCode', this.formSearch.cityCode)
      this.$set(this.formSearch.areaSelect1, 'cityName', this.formSearch.cityName)
      this.$refs.areaselect.resetForm()
      this.formSearch.entName = ''
      this.formSearch.agentId = ''
      this.fetchData()
    },
    onExcel() {
      this.loading = true
      let cityC = ''
      if (this.formSearch.areaSelect1.cityCode === '0') {
        cityC = ''
      } else {
        cityC = this.formSearch.areaSelect1.cityCode
      }
      toExcel({ provCode: this.formSearch.areaSelect1.areaCode, cityCode: cityC, year: this.year, entName: this.formSearch.entName, currentPage: this.currentPage }).then(response => {
        if (response.result === 1) {
          Excel.exportEnterpriseExcel(response.data, this.formSearch.areaSelect1.areaName + this.formSearch.areaSelect1.cityName + parseTime(new Date(), '{y}{m}{d}{h}{i}{s}'))
          setTimeout(() => {
            this.loading = false
          }, 10000)
        } else {
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    getAreaSelect2(msg) { // msg就是传过来的数据了  这只是个形参  名字可以随意
      this.formSearch.areaSelect1 = msg// 然后将数据赋值给chindVal
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    handleSizeChange(val) {
      this.limit = val
      this.currentPage = 1
      this.fetchData()
    },
    toDetails(userId, year, cityCode) {
      this.$router.push({ name: 'SubmittedDetails', query: { userId: userId, year: year, cityCode: cityCode, pageN: this.currentPage }})
    },
    changYear(e) {
      console.log(e)
    }
  }
}
</script>

